import logo from './logo.svg';
// import { render } from '@testing-library/react';
import React from 'react';
import './App.scss';
// import React,{Component} from 'react';
import Input from './component/Input'
import Tabber from './component/Tabber'
import Child from './component/Child';
import good1 from './assets/good1.gif'
import good2 from './assets/good2.gif'
import good3 from './assets/good3.gif'
import good4 from './assets/good4.gif'
import good5 from './assets/good5.gif'
import good6 from './assets/good6.gif'
import good7 from './assets/good7.gif'
import good8 from './assets/good8.gif'
import good9 from './assets/good9.gif'
import good10 from './assets/good10.gif'
import good11 from './assets/good11.gif'

class App extends React.Component{
  constructor(props){//在constructor中对组件状态进行初始化
    super(props);
    this.state = {  //初始化组件状态
      currentIndex:0,
      arr:[
        {
          name:'活动专区',
          list:[
            {name:'商品1',pic:logo},
            {name:'商品2',pic:logo},
            {name:'商品3',pic:logo},
            {name:'商品4',pic:logo},
            {name:'商品5',pic:logo},
            {name:'商品6',pic:logo},
          ]
        },
        {
          name:'品牌',
          list:[
            {name:'品牌1',pic:logo},
            {name:'品牌2',pic:logo},
            {name:'品牌3',pic:logo},
            {name:'品牌4',pic:logo},
            {name:'品牌5',pic:logo},
            {name:'品牌6',pic:logo},
          ]
        },
        {
          name:'美容护肤',
          list:[
            {name:'美容护肤1',pic:good1},
            {name:'美容护肤2',pic:good2},
            {name:'美容护肤3',pic:good3},
            {name:'美容护肤4',pic:good4},
            {name:'美容护肤5',pic:good5},
            {name:'美容护肤6',pic:good6},
          ]
        },
        {
          name:'彩妆',
          list:[
            {name:'美容护肤1',pic:good7},
            {name:'美容护肤2',pic:good8},
            {name:'美容护肤3',pic:good9},
            {name:'美容护肤4',pic:good10},
            {name:'美容护肤5',pic:good11},
            {name:'美容护肤6',pic:logo},
          ]
        }
        ,
        {
          name:'香水',
          list:[
            {name:'美容护肤1',pic:logo},
            {name:'美容护肤2',pic:logo},
            {name:'美容护肤3',pic:logo},
            {name:'美容护肤4',pic:logo},
            {name:'美容护肤5',pic:logo},
            {name:'美容护肤6',pic:logo},
          ]
        }
        ,
        {
          name:'酒类',
          list:[
            {name:'美容护肤1',pic:logo},
            {name:'美容护肤2',pic:logo},
            {name:'美容护肤3',pic:logo},
            {name:'美容护肤4',pic:logo},
            {name:'美容护肤5',pic:logo},
            {name:'美容护肤6',pic:logo},
          ]
        }
      ]
    }
    this.handleClick.bind(this);

  }
  handleClick(index){
    this.setState({
      currentIndex:index
    })
  }


render(){//render是必须的，render中必须通过return返回 组件模板
  return (
  <>
    <Input></Input>
    <div className='app'>
     <div className="left">
      {
        this.state.arr.map((item,index)=>{
          return(
            <div key={index} className={`btn ${this.state.currentIndex == index?'active':''}`}  onClick={
              ()=>{
                this.handleClick(index)
              }
            }>{item.name}</div>
          )
        })
      }
     </div>
     <div className="right">
      {
        this.state.arr[this.state.currentIndex].list.map((item,index)=>{
          return(
            <div className='item' key={index}>
              <img src={item.pic} alt="" />
              <div className="name">{item.name}</div>
            </div>
          )
        })
      }
     </div>
    </div>
    {/* <Child title='今天学习react'></Child>  */}
    <Tabber></Tabber>
    </>
  )

}

}
export default App;
